<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>05-使用纯回调函数封装ajax请求</title>
</head>

<body>
  <script>
    // 可复用的发 ajax 请求的函数: xhr + 成功回调 + 失败回调
    function sendAjax (url, data, success, error) {
      console.log('异步任务启动---');
      // 发送ajax请求
      const xhr = new XMLHttpRequest();
      //处理query请求参数，将对象形式转成字符串
      let queryStr = '';
      for (const key in data)
      {
        queryStr += `?${key}=${data[key]}&`;
      }
      queryStr = queryStr.slice(0, -1);
      xhr.open('GET', url + queryStr);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4)
        {
          if (xhr.status >= 200 && xhr.status < 300)
          {
            // 请求成功, 调用 success
            success(xhr.response)
          } else
          {
            // 请求失败, 调用 error
            error(new Error('状态码：' + xhr.status))
          }
        }
      }
    };

    //调用封装的方法
    sendAjax(
      'https://api.github.com/search/users',
      { q: 'ajax' },
      (value) => { console.log(`成功的value：${value}`); },
      (reason) => { console.log(`失败原因：${reason}`); }
    );


  </script>
</body>

</html>